<template>
  <div class="login_body">
    <el-card class="login_card">
      <h3 class="login_title">Firemoth后台管理系统</h3>
      <el-form label-position="right" label-width="auto" :model="loginForm">
        <el-form-item>
          <el-input placeholder="请输入用户名" v-model="loginForm.username" size="large" clearable/>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码" type="password" v-model="loginForm.password" size="large" clearable/>
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item prop="code" style="margin-right: 5%">
              <el-input type="text" size="large" v-model="loginForm.code" placeholder="点击图片更换验证码"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <img
                style="width: 87px; height: 40px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button style="width: 80%; margin-left: 10%" type="primary" size="large" @click="submitLogin">登录
            </el-button>
          </el-col>
          <el-col :span="12">
            <el-button style="width: 80%; margin-left: 10%" disabled size="large">注册</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import {router} from '../router'

const loginForm = reactive({
  username: '',
  password: '',
  code: ''
})

const submitLogin = function () {
  if (loginForm) {
    router.push('/')
  }
  console.log(loginForm)
}
</script>

<style lang="scss" scoped>
.login_body {
  height: 100%;
  width: 100%;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('/src/assets/黑天.jpg');
}

.login_title {
  margin: 0px auto 25px auto;
  text-align: center;
  color: #707070;
}

.login_card {
  width: 300px;
  height: 280px;
  margin: 15% auto;
  padding: 30px;
  border-radius: 5%;
}
</style>
